import React from "react";
import styles from "./index.less"
import { Button, Input } from "antd";

class ThirdSyncData extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      syncLoading:false
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  doSync = () => {
    this.setState({
      syncLoading:true
    },async () => {
      // const res = await 
    })
  }

  render(){
    const { syncLoading } = this.state;
    const { search,toSetting } = this.props;
    return (
      <div>
        <div className={styles.tableTop}>
          <div>
            <Input.Search 
              placeholder="请输入登录用户名" 
              value={search} 
              onChange={(e) => this.props.changeSearch(e.target.value)} 
              onSearch={() => this.props.doSearch(1,size)} 
              style={{width:200}}
            />
          </div>
          
          <div style={{flexShrink:'0'}}>
            <Button type="primary" style={{marginRight:8}} onClick={this.doSync} loading={syncLoading}>同步</Button>
            <Button type="primary" ghost style={{marginRight:8}}>同步记录</Button>
            <Button onClick={toSetting}>对接管理</Button>
          </div>
        </div>
      </div>
    )
  }
}

export default ThirdSyncData